<template>
    <div style="height: 1%">
        <v-btn
                absolute
                elevation="24"
                fab
                raised
                x-small
                right
                rounded
                style="position: fixed; bottom: 10px; right: 10px;"
                @click="dialog=!dialog"
        >
            <v-icon size="40">mdi-face-agent</v-icon>
        </v-btn>
        <v-dialog
                v-model="dialog"
                transition="dialog-bottom-transition"
        >
            <v-card style="margin-top: -24%;margin-left: 68.5%;position: absolute" height="100%" width="30%">

                <v-app-bar
                        flat
                >
                    <v-icon size="40">mdi-face-agent</v-icon>

                    <v-toolbar-title class="text-h6 pl-0">
                        PassionFlareRobot
                    </v-toolbar-title>

                </v-app-bar>

                <v-card-title class="white--text mt-8" v-if="this.$store.state.isLogin==false">
                    <v-avatar size="40" style="position: absolute;margin-left: 80%;margin-top:-8%">
                        <img

                                alt="user"
                                src="https://cdn.pixabay.com/photo/2020/06/24/19/12/cabbage-5337431_1280.jpg"
                        >
                    </v-avatar>
                    <p style="margin-top: -8%;margin-left: 3%;color: black">您好，未登录用户</p>
                </v-card-title>
                <v-card-title class="white--text mt-8" v-else>
                    <v-avatar size="40" style="position: absolute;margin-left: 80%;margin-top:-8%">

                        <img
                                alt="user"
                                src=this.$store.state.user.avatar
                        >
                    </v-avatar>
                    <p style="margin-top: -8%;margin-left: 3%;color: black">您好，{{this.$store.state.user.username}}</p>
                </v-card-title>

                <v-card-text>
                    <v-card id="dialog-card"
                            style="margin-top: 0%; height: 370px; overflow: auto;"
                            max-height="370px"
                            min-height="370px"
                            min-width="102.5%"
                            max-width="102.5%"
                    >

                        <v-timeline
                                align-top
                                dense
                                style="margin-left: -7%"
                        >

                            <v-timeline-item
                                    v-for="message in messages"
                                    :key="message.time"
                                    :color="message.color"
                                    small
                            >
                                <div>
                                    <div class="font-weight-normal">
                                        <strong>{{ message.from }}</strong>
                                    </div>
                                    <div>{{ message.message }}</div>
                                </div>
                            </v-timeline-item>
                        </v-timeline>
                    </v-card>
                </v-card-text>
                <v-col
                        cols="24"
                        md="12"

                >
                    <v-textarea
                            solo
                            name="input-7-4"
                            no-resize
                            label="请填写对话内容"
                            style="margin-top: -3%;margin-left: 3%"
                            v-model="query"
                            @keyup.enter="getResponce()"
                    ></v-textarea>
                    <v-btn style="margin-top: -5%;margin-left: 80% ;position: absolute" @click="getResponce()">发送
                    </v-btn>
                </v-col>

            </v-card>
        </v-dialog>
    </div>
</template>

<script>
    export default {
        name: "ai",
        data() {
            return {
                dialog: false,
                query: "",
                messages: [
                    {
                        from: 'PassionFlareRobot',
                        message: `我是PassionFlareRobot，欢迎向我提问`,
                        color: 'green',
                    }
                ],
            }

        },
        methods: {
            getResponce() {
                console.log(this.query)
                console.log("123");
                this.messages.push({
                    from: 'You',
                    message: this.query,
                    color: 'deep-purple lighten-1',
                })
              setTimeout(() => {
                let dialogDom = document.getElementById('dialog-card');
                dialogDom.scrollTop = dialogDom.scrollHeight;
                this.query = '';
              }, 200);
                this.$api.common.getResponce(this.query).then((res) => {
                    let result = res;
                    if (result.success) {
                        this.messages.push({
                            from: 'PassionFlareRobot',
                            message: result.message,
                            color: 'green',

                        });
                      setTimeout(() => {
                        let dialogDom = document.getElementById('dialog-card');
                        dialogDom.scrollTop = dialogDom.scrollHeight;
                        this.query = '';
                      }, 200);
                    } else {
                        console.log(result.exc)
                    }
                })
                this.query=""
            }
        }
    }
</script>

<style scoped>

</style>
